<template>
    <div class="caseDetail">
        <el-button size="small" class="goBack" @click="goBack">返回</el-button>
        <div class="state" style="display: flex;align-items: center">
            <!-- <img style="color: #3a8ee6;font-size: 18px;margin-left:50px" src=""></img> -->
            <i class="el-icon-odometer" style="color:  #3a8ee6;font-size: 18px;margin-left:10px"></i>
            <span style="color: #3a8ee6;font-size: 18px;margin-left:10px">当前状态：</span>
            <span style="color: #3a8ee6;font-size: 18px">{{c_state}}</span>
        </div>
        <div class="orderInfo" style="width: 100%;
            height: 210px;
            border: 1px solid #3a8ee6;
            border-radius: 5px;margin-top: 20px">
            <div class="top"
                 style="background-color: #b3d8ff;height: 30px;line-height:30px;border-radius: 5px 5px 0 0;"><span
                    style="margin-left: 20px;font-size: 12px;font-weight: bold;">病例信息</span></div>
            <div class="bottom">
                <table style="height: 100%;width: 100%;">
                    <tr style="height: 32px;line-height: 32px;padding-top: 10px">
                        <td>病例编号：{{c_id}}</td>
                        <td>疾病症状：{{c_name}}</td>
                    </tr>
                    <tr style="height: 32px;line-height: 32px;">
                        <td>就诊医生：{{doc_name}}</td>
                        <td>就诊科室：{{d_name}}</td>
                    </tr>
                    <tr style="height: 32px;line-height: 32px;">
                        <td>就诊费用：{{c_free}}</td>
                        <td>合计费用：{{c_free}}</td>
                    </tr>
                    <tr style="height: 32px;line-height: 32px;">
                        <td>开始时间：{{c_time_start}}</td>
                        <td>结束时间：{{c_time_end}}</td>
                    </tr>
                    <tr style="height: 32px;line-height: 32px;">
                        <td>描述：{{c_description}}</td>
                    </tr>

                </table>
            </div>
        </div>
        <div class="userInfo" style="width: 100%;
            height: 190px;
            border: 1px solid #3a8ee6;
            border-radius: 5px;margin-top: 20px">
            <div class="top"
                 style="background-color: #b3d8ff;height: 30px;line-height:30px;border-radius: 5px 5px 0 0;"><span
                    style="margin-left: 20px;font-size: 12px;font-weight: bold;">用户信息</span></div>
            <div class="bottom">
                <table style="height: 100%;width: 100%;">
                    <tr>
                        <td style="font-weight: bold;">就诊人信息</td>
                    </tr>
                    <tr>
                        <td>姓名：{{p_name}}</td>
                        <td>手机号：{{p_phone}}</td>
                    </tr>
                    <tr>
                        <td>就诊卡号：{{p_id}}</td>
                        <td>身份证号：{{p_idcard}}</td>
                    </tr>

                </table>
            </div>
        </div>
    </div>
</template>

<script>
    import {caseListGet} from "../../api/case";
    export default {
        name: "detail",
        data() {
            return {
                c_id:'',
                c_name:'',
                doc_name:'',
                d_name:'',
                c_free:'',
                c_time_start:'',
                c_time_end:'',
                c_description:'',
                c_state:'',
                p_id:'',
                p_name:'',
                p_phone:'',
                p_idcard:''
            }
        },

        created() {
            this.backShow(this.$route.query.id);
        },

        mounted() {

        },

        methods: {
            goBack() {
                this.$router.go(-1);
            },
            async backShow(id){
                try{
                    let { list } = await caseListGet({
                        pageIndex:1,
                        pageSize:1,
                        c_id:id,
                        hospitalId:sessionStorage.getItem('hospitalId')
                    });
                    this.c_id = list[0].c_id;
                    this.c_name = list[0].c_name;
                    this.doc_name = list[0].doc_name;
                    this.d_name = list[0].d_name;
                    this.c_free = list[0].c_free;
                    this.c_time_start = list[0].c_time_start;
                    this.c_time_end = list[0].c_time_end;
                    this.c_description = list[0].c_description;
                    this.c_state = list[0].c_state;
                    this.p_name = list[0].p_name;
                    this.p_phone = list[0].p_phone;
                    this.p_id = list[0].p_id;
                    this.p_idcard = list[0].p_idcard
                }catch (e) {
                    console.error(e);
                }

            },
        },
    }
</script>

<style scoped lang='scss'>
    .caseDetail {
        position: relative;
        background: #fff;
        border-radius: 5px;
        padding: 10px 20px;
        box-sizing: border-box;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
        margin: 0 10px 10px;

        .state {
            margin-top: 20px;
            width: 100%;
            height: 80px;
            border: 1px solid #3a8ee6;
            border-radius: 5px;
        }
        tr{height: 50px;line-height: 50px;}
        td { text-overflow:ellipsis; white-space:nowrap; overflow:hidden;padding-left: 30px;font-size:15px}
    }
</style>